<template>
  <div>
    <div v-for="paperItem of paperList" :key="paperItem._id">
      <div
        class="paper-item"
        hover-class="paper-item__hover"
        @click="$emit('click', paperItem)"
      >
        <div>
          <div class="paper-item__title">{{ paperItem.title }}</div>
          <div class="u-m-t-8 u-m-b-8">
            <u-tag
              text="VIP"
              size="mini"
              class="u-m-r-8"
              shape="circle"
              mode="dark"
              v-if="paperItem.isVip"
            ></u-tag>
            <span v-if="paperItem.tags.length !== 0">
              <u-tag
                :text="tagItem"
                size="mini"
                class="u-m-r-8"
                shape="circle"
                mode="dark"
                v-for="(tagItem, tagIndex) of paperItem.tags"
                :key="tagIndex"
              ></u-tag>
            </span>
          </div>

          <div class="u-flex u-col-center u-m-t-6">
            <u-icon name="clock" color="#606266"></u-icon>
            <span class="u-m-l-12 u-content-color">{{
              paperItem.timing | secondToMin
            }}</span>
          </div>
        </div>
        <div>
          <u-icon name="arrow-right"></u-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    paperList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
}
</script>

<style lang="scss">
.paper-item {
  display: flex;

  margin: 24rpx 32rpx;
  border-radius: 10px;
  padding: 32rpx 24rpx;

  background: #ecf0f3;

  box-shadow: 6px 6px 12px #c2c2c6, -6px -6px 12px #ffffff;

  transition: box-shadow 0.3s ease;

  justify-content: space-between;
  align-items: center;

  &__hover {
    background: #ecf0f3;

    box-shadow: inset 12px 12px 24px #d3d3d7, inset -12px -12px 24px #ffffff;
  }

  &__title {
    font-size: 36rpx;
    font-weight: 600;
  }
}
</style>
